<!DOCTYPE html>

<head>

<title>Incorrect Quotes Generator (8 Characters)</title>

<style>

/* PHẦN GIAO DIỆN (CSS) */

body {

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

background-color: #1a1a2e;

color: #e0e0e0;

display: flex;

flex-direction: column;

align-items: center;

min-height: 100vh;

margin: 0;

padding: 20px;

}

.container {

background-color: #16213e;

padding: 30px;

border-radius: 15px;

box-shadow: 0 10px 30px rgba(0,0,0,0.5);

width: 100%;

max-width: 700px;

}

h1 {

color: #0f3460;

background: #e94560;

padding: 10px;

border-radius: 5px;

text-align: center;

margin-top: 0;

}

.controls {

display: flex;

flex-direction: column;

gap: 15px;

}

/* Chia cột cho ô nhập tên khi có nhiều nhân vật */

#input-container {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 10px;

}

label { font-weight: bold; color: #e94560; }

select, input {

padding: 12px;

border-radius: 8px;

border: 1px solid #0f3460;

background-color: #0f3460;

color: white;

font-size: 15px;

}

button {

background-color: #e94560;

color: white;

border: none;

padding: 15px;

font-size: 18px;

font-weight: bold;

border-radius: 8px;

cursor: pointer;

transition: 0.3s;

margin-top: 10px;

}

button:hover { background-color: #ff2e63; transform: translateY(-2px); }

.output-area {

background-color: #ffffff;

color: #1a1a2e;

padding: 25px;

border-radius: 10px;

min-height: 120px;

white-space: pre-wrap;

font-size: 19px;

line-height: 1.6;

margin-top: 25px;

border-left: 8px solid #e94560;

font-style: italic;

}

</style>

</head>

<body>

<h1>Quotes Generator</h1>

<div>

<label>Số lượng nhân vật (1-8):</label>

</select>

</div>

</div>

<button onclick="generateQuote()">Tạo Hội Thoại Mới!</button>

</div>

Nhấn nút để bắt đầu...

</div>

/* PHẦN DỮ LIỆU CÂU THOẠI (Bạn thêm chữ vào đây) */

const prompts = {

1: ["{A}: Đừng nhìn tôi, tôi cũng không biết mình đang làm gì."],

2: [

"{A}: Cậu có kế hoạch gì không?\n{B}: Có chứ, nhưng cậu sẽ không thích nó đâu.",

"{A}: Tại sao chúng ta lại ở đây?\n{B}: Vì sự ngu ngốc của cậu đó {A}."

3: ["{A}: Một cộng một bằng mấy?\n{B}: Bằng hai.\n{C}: Sai rồi, bằng một gia đình."],

4: ["{A}: Đội hình tập hợp!\n{B}: Tớ bận ngủ rồi.\n{C}: Tớ đang ăn.\n{D}: Còn tớ thì không quan tâm."],

5: ["{A}, {B}, {C}, {D}, và {E} đang cố gắng quyết định xem nên đi ăn ở đâu."],

6: ["{A}: Sáu người chúng ta đi chung một xe à?\n{B}: Ngồi lên đùi nhau đi.\n{C}: Chật quá!\n{D}: {E} đừng có đẩy!\n{F}: Tớ muốn xuống xe..."],

// Mẫu cho 7 nhân vật

7: [

"{A}: Được rồi, kế hoạch là gì?\n{B}: Đấm nó.\n{C}: Không, đàm phán.\n{D}: Chạy.\n{E}: Khóc.\n{F}: Ăn trước đã.\n{G}: Mọi người im lặng hết đi!",

"Cả nhóm đang chơi trốn tìm:\n{A} đi tìm.\n{B} trốn trong tủ.\n{C} trốn dưới gầm giường.\n{D} leo lên nóc nhà.\n{E} quên mất là đang chơi nên đi về nhà.\n{F} và {G} trốn cùng một chỗ và đang cãi nhau."

// Mẫu cho 8 nhân vật

8: [

"Tình huống giả tưởng khi cả nhóm đi cắm trại:\n{A}: Ai mang lều?\n{B}: Tớ tưởng {C} mang.\n{C}: Đâu có, {D} bảo là {D} mang mà!\n{D}: Tớ quên ở nhà rồi.\n{E}: Thế đêm nay ngủ đâu?\n{F}: Trong xe của {G} đi.\n{G}: Xe tớ hết xăng rồi.\n{H}: *thở dài* Tớ biết ngay là sẽ như thế này mà."

]

};

function updateInputs() {

const num = document.getElementById('num-chars').value;

const container = document.getElementById('input-container');

container.innerHTML = '';

for (let i = 0; i < num; i++) {

const charCode = String.fromCharCode(65 + i); // A to H

const input = document.createElement('input');

input.type = 'text';

input.placeholder = `Nhân vật ${charCode}`;

input.id = `char-${charCode}`;

container.appendChild(input);

}

function generateQuote() {

const num = document.getElementById('num-chars').value;

const availablePrompts = prompts[num];

if (!availablePrompts) {

document.getElementById('result').innerText = "Vui lòng thêm câu thoại cho " + num + " người vào mã nguồn.";

return;

}

let quote = availablePrompts[Math.floor(Math.random() * availablePrompts.length)];

for (let i = 0; i < num; i++) {

const charCode = String.fromCharCode(65 + i);

const nameInput = document.getElementById(`char-${charCode}`).value;

const name = nameInput.trim() !== '' ? nameInput : `Nhân vật ${charCode}`;

const regex = new RegExp(`{${charCode}}`, 'g');

quote = quote.replace(regex, name);

}

document.getElementById('result').innerText = quote;

}

updateInputs();

</script>

</body>

</html>